<template>
  <div class="character animate__animated animate__fadeInUp">
    <!-- 角色导航栏 -->
    <div class="datr">
      <p class="ga"></p>
      <span class="chryu">角色管理</span>
    </div>
    <el-card shadow="never">
      <!-- 表格导航 -->
      <div
        class="bigre animate__animated animate__fadeInUp animate__delay-0.9s"
      >
        <span>数据列表</span>
        <p class="mr-1">
          <el-button @click="tianjia()">添加角色</el-button>
        </p>
      </div>

      <!-- 系统设置角色管理表格 -->
      <div class="mt-1">
        <p class="d-flex j-center">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="roleName" label="角色名称" width="200">
            </el-table-column>
            <el-table-column prop="num" label="成员数量" width="200">
            </el-table-column>
            <el-table-column prop="created" label="添加时间"> </el-table-column>
            <el-table-column prop="status" label="是否启用"> </el-table-column>
            <el-table-column class="" label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="rolepermissions(scope, scope.$index, tableData)"
                  type="text"
                  size="small"
                  >权限设置</el-button
                >
                <!-- 删除 -->
                <el-button type="text" @click="open(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </p>

        <!-- 添加弹框 -->
        <el-dialog
          :append-to-body="true"
          title="角色添加"
          :visible.sync="dialogFormVisible"
        >
          <el-form :model="form">
            <el-form-item
              required
              label="角色名称"
              :label-width="formLabelWidth"
            >
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              required
              label="角色描述"
              :label-width="formLabelWidth"
            >
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="form.region"
                autocomplete="off"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="quexiao()">取 消</el-button>
            <el-button type="primary" @click="tianjiaqueren()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 页码 -->
      <div class="t-right">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="limit"
          :total="total"
          @current-change="diji"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import moment from "moment";
import { color } from "echarts";
moment.locale("zh-cn");
export default {
  data() {
    return {
       leng:0,//数据的长度
      limit: 6, //广告渲染页数
      total: 0, //广告渲染总数数
      page: 1, //当前页
      editData: {
        name: "王方华",
        con: "dsfsdfsdfsdfdsfsdfsdfsdfsdfs",
      },

      // 添加弹框数据

      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
      },
      formLabelWidth: "10px",

      //表格渲染数据
      tableData: [
        // {
        //   shuli: "10",
        //   name: "王方华",
        //   date: "2021.7.2  8:30:6:59",
        //   sfqi: "是",
        // },
        // {
        //   shuli: "10",
        //   name: "王方华",
        //   date: "2021.7.2  8:30:6:59",
        //   sfqi: "是",
        // },
        // {
        //   shuli: "10",
        //   name: "王方华",
        //   date: "2021.7.2  8:30:6:59",
        //   sfqi: "是",
        // },
        // {
        //   shuli: "10",
        //   name: "王方华",
        //   date: "2021.7.2  8:30:6:59",
        //   sfqi: "是",
        // },
        // {
        //   shuli: "10",
        //   name: "王方华",
        //   date: "2021.7.2  8:30:6:59",
        //   sfqi: "是",
        // },
        // {
        //   shuli: "10",
        //   name: "王方华",
        //   date: "2021.7.2  8:30:6:59",
        //   sfqi: "是",
        // },
        // {
        //   shuli: "10",
        //   name: "王方华",
        //   date: "2021.7.2  8:30:6:59",
        //   sfqi: "是",
        // },
      ],
    };
  },
  // 函数
  methods: {
    // 弹框取消
    quexiao() {
      this.dialogFormVisible = false;
      this.$message({
        type: "info",
        message: "添加取消",
      });
    },
    // 渲染查询函数
    chaXun() {
      // console.log(111);
      this.$axios({
        url: "/gym/role/list",
        method: "post",
        data: {
          page: this.page,
          limit: this.limit,
        },
      }).then((res) => {
        this.leng=res.data.data.length;
        this.tableData = res.data.data;
        for (let i in this.tableData) {
          this.tableData[i].status =
            this.tableData[i].status == 0 ? "否" : "是";
          // console.log(this.tableData[0].status)
        }
        // console.log(this.tableData);
        this.total = res.data.count;
        for (let t in this.tableData) {
          this.tableData[t].created = moment(this.tableData[t].created).format(
            "YYYY-MM-DD HH:mm:ss:ms"
          );
        }
        // console.log(moment("2021-06.08 8:25:12").format("x"))
      });
    },
    //页面点击函数
    diji(page) {
      this.page = page;
      this.chaXun();
      // this.total=this.tableData.length
      // console.log(this.page,this.total)
    },
    // 权限设置跳转
    rolepermissions(scope,index, tableData) {
      this.$router.push({
         path: "rolepermissions",
        name: "RolePermissions",
        params: {user: scope.row.id },
        });
      //  console.log(v)
    },
    // 删除
    open(v) {
      //  this.dialogFormVisible = true;
      this.$confirm("确定要删除该角色吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url: "/gym/role/delete",
            method: "post",
            data: {
              id: v.id,
            },
          })
            .then((res) => {
              console.log(res.data);
              if (
                (res.data.code >= 200 && res.data.code < 300) ||
                res.data.code == 304
              ) {
                // console.log(111);
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                 if(this.leng-1==0){
                  this.page--;
                }
               if(this.page<=1){
                 this.page=1;
               }
                this.chaXun();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加
    tianjia() {
      this.dialogFormVisible = true;
    },
    // 添加确认是
    tianjiaqueren() {
      this.$axios({
        url: "/gym/role/insert",
        method: "post",
        data: {
          roleName: this.form.name,
          description: this.form.region,
        },
      })
        .then((res) => {
          this.dialogFormVisible = false;
          if (
            (res.data.code >= 200 && res.data.code < 300) ||
            res.data.code == 304
          ) {
            // console.log(111);
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.chaXun();
          } else {
            this.$message.error("添加失败");
          }
        })
        .catch(() => {});
    },
  },
  // 创建前
  brforeCreate() {},
  // 创建后
  created() {},
  // 挂载前
  beforeMount() {
    this.chaXun();
  },
  // 挂载后
  mounted() {
    // this.diji()
    console.log(this.total);
  },
  // 数据更新前
  beforeUpdate() {},
  // 数据更新后
  updated() {},
  // 销毁前
  beforeDestroy() {},
  // 销毁后
  destroyed() {},
};
</script>

<style scoped lang="less">
//表格导航栏css
.bigre {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  // justify-content:'center';
  line-height: 50px;
  background-color: rgba(175, 175, 175, 0.557);
  border-radius: 8px 8px 0px 0px;
  span {
    width: 80px;
    height: 50px;
    color: rgb(12, 3, 3);
  }
  p {
    width: 100px;
    height: 50px;
  }
}

// 角色管理导航
.datr {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background: linear-gradient(
    to right,
    rgba(17, 17, 17, 0.619),
    rgba(14, 13, 13, 0.251)
  );
  border-radius: 8px 8px 0px 0px;

  .ga {
    display: flex;
    align-items: center;
    width: 5px;
    height: 35px;
    background-color: rgba(0, 0, 255);
    // line-height: 50px;
    margin-left: 10px;
  }
  .chryu {
    display: inline-block;
    width: 80px;
    height: 50px;
    line-height: 50px;
    color: rgb(247, 245, 245);
    font-size: 17px;
    font-weight: bold;
  }
}
// 添加的表格css
.el-form-item {
  /deep/.el-form-item__content {
    margin-left: 100px !important;
  }
  /deep/.el-form-item__label {
    width: 100px !important;
  }
}
</style>